<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>自定义插件</title>
  <link rel="stylesheet" href="./index.css" />
  <script type="text/javascript" src="./vendor/jquery/jquery-v2.2.2-min.js"></script>
  <script type="text/javascript" src="./vendor/sdkjs/plugins.js"></script>
  <!-- <script type="text/javascript" src="./vendor/plugins-ui.js"></script> -->

  <script src="./vendor/vue@2.7.14.js"></script>
  <script src="./vendor/axios.js"></script>
  <script src="./vendor/element/index.js"></script>
  <!--<link rel="stylesheet" href="./vendor/element/index.css">-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <!-- <script src="./main.js"></script> -->

<body>
  <div id="app" class="content">
    <el-button @click="addTest" size="mini">test</el-button>
    <div class="top-one">
      <el-radio-group v-model="radioTop" size="small">
        <el-radio-button label="1">事务项</el-radio-button>
        <el-radio-button label="2">数据项</el-radio-button>
        <el-radio-button label="3">文件链接</el-radio-button>
        <el-radio-button label="4">页眉页脚</el-radio-button>
      </el-radio-group>
    </div>

    <div v-if="radioTop==1">
      <div class="top-two">
        <el-checkbox v-model="checked" size="mini">全选</el-checkbox>
        <el-button-group>
          <el-button v-for="item in secondBtnList" :key="item" @click="addOffice(item)" size="mini">
            {{item}}
          </el-button>
        </el-button-group>
      </div>
      <div class="list-desc" v-for="(section,index) in listDesc">
        <div class="list-content">
          <!-- <el-checkbox-group class="list-content-header" v-model="section.status">
            <el-checkbox size="mini">{{index+1}}.{{section.title}}</el-checkbox>
          </el-checkbox-group> -->
          <!-- @change="isSecondBtnStatus(index)" -->
          <el-checkbox value="secondSelectBtnIndex" :label="index" @change="isSecondBtnStatus(index)"
            size="mini">{{index+1}}.{{section.title}}</el-checkbox>
          <div class="list-content-item" v-for="item in section.children">
            <span class="list-content-item left">
              <el-checkbox v-model="item.selectStatus" size="mini"></el-checkbox>
              <div>{{item.desc}}</div>
            </span>
            <el-radio-group class="list-content-item right" v-model="item.value" size="mini">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="2">不正常</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>

    <div class="section-content" v-if="radioTop==2">
      <el-table :data="tableData" stripe border size="mini">
        <el-table-column prop="no" label="No." width="50px">
        </el-table-column>
        <el-table-column prop="name" label="中文名称" width="100px">
        </el-table-column>
        <el-table-column prop="field_name" label="字段名称" width="100px">
        </el-table-column>
        <el-table-column prop="format" label="格式">
        </el-table-column>
      </el-table>
    </div>

    <div class="section-content" v-if="radioTop==3">
      <span class="flex-center-r" style="padding: 4px 0;">
        <el-select placeholder="请选择" size="mini" style="width: 100px;">
          <el-option v-for="item in urlOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="urlInput" placeholder="请输入内容" size="mini" style="width: 160px;"></el-input>
      </span>
      <el-table :data="tableData" stripe border size="mini">
        <el-table-column prop="no" label="No." width="50">
        </el-table-column>
        <el-table-column prop="name" label="文件名称" width="100">
        </el-table-column>
        <el-table-column prop="filed_name" label="文件分类">
        </el-table-column>
        <el-table-column prop="format" label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini" round>插入</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="section-content" v-if="radioTop==4">
      <el-table :data="tableData" stripe border size="mini">
        <el-table-column prop="no" label="No." width="50">
        </el-table-column>
        <el-table-column prop="name" label="页眉页脚名称">
        </el-table-column>
      </el-table>
    </div>

  </div>

  <script type="module">
    import PluginFactory from "./setup.js";

    new Vue({
      el: "#app",
      mounted: function () {
        const pFactory = new PluginFactory();
        this.pFactory = pFactory;
        console.log("window", window, this.pFactory);
      },
      methods: {
        addTest() {
          this.pFactory.test();
        },
        async addOffice(txt) {
          if (txt === "事务") {
            const data = await this.pFactory.addOffice();
            this.listDesc = data;
          }
          if (txt === "标题") {

          }
        },
        setOfficeSelectStatus() {
          this.officeSelectStatus = true;
        },
        isSecondBtnStatus(index) {
          this.secondSelectBtnIndex = index
          // const officeSelectStatus = this.officeSelectStatus;
          // if (["选项", "填写", "描述"].includes(title) && officeSelectStatus) {
          //   this.secondBtnStatus = true;
          //   return;
          // }
          // this.secondBtnStatus = false;
        }
      },
      data: function () {
        return {
          topBtnList: ["事务项", "数据项", "文件链接", "页眉页脚"],
          secondBtnList: ["升级", "降级", "删除", "事务", "标题", "选项", "填写", "描述"],
          listDesc: [
            {
              title: "分析前准备",
              selectStatus: false,
              children: [
                {
                  selectStatus: true,
                  desc: "检查水源并打开净水仪贮水容器的出水调门(制水开关及纯水开关)",
                  value: 1
                }
              ]
            },
            {
              title: "实验后处理", selectStatus: false, children: [
                {
                  selectStatus: true,
                  desc: "检查水源并打开净水仪贮水容器的出水调门(制水开关及纯水开关)",
                  value: 1
                }
              ]
            }
          ],
          tableData: [{
            no: "1",
            name: "操作者",
            filed_name: "",
            format: "YYYY"
          }, {
            no: "2",
            name: "设备管理员",
            filed_name: "KEEP_PERSON",
            format: "YYYY-MM-DD"
          }, {
            no: "3",
            name: "设备管理员",
            filed_name: "KEEP_PERSON",
            format: "YYYY-MM-DD"
          }],
          urlOptions: [{
            value: "1",
            label: "质量手册"
          }, {
            value: "2",
            label: "程序化文件"
          }, {
            value: "3",
            label: "项目SOP"
          }, {
            value: "4",
            label: "仪器SOP"
          }],
          urlInput: "",
          radioTop: "1",
          checked: false,
          pFactory: null,
          officeSelectStatus: false,
          secondBtnStatus: false,
          secondSelectBtnIndex: null

        };
      }
    });
  </script>
</body>

</html>